
<div style="POSITION: relative" id="content">
  <h3>easyUI 展开DataGrid里面的行显示详细信息</h3>
  <div id="article_content" class="article_content">
    <p>datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图,datagrid可以显示展开按钮("+" 或者 "-")在数据行的左边,用户可以展开一个行去显示一个附加的详细信息.
    </p>
    <p><img src="documentation/images/1344654703_4279.png" alt="">
      </p>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 1: 创建 DataGrid</h4>
    <pre name="code" class="html">&lt;table id=&quot;dg&quot; style=&quot;width:500px;height:250px&quot; url=&quot;data/datagrid_data.json&quot; title=&quot;DataGrid - Expand Row&quot; singleselect=&quot;true&quot; fitcolumns=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;60&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;productid&quot; width=&quot;80&quot;&gt;Product ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; align=&quot;right&quot; width=&quot;70&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; align=&quot;right&quot; width=&quot;70&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;50&quot; align=&quot;center&quot;&gt;Status&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 2: 为DataGrid设置详细视图</h4>
    使用详细视图,切记:引入视图script文件在你的页面的头部.
    <p>
    <pre name="code" class="html">&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.jeasyui.com/easyui/datagrid-detailview.js&quot;&gt;&lt;/script&gt;  </pre>
    <pre name="code" class="javascript">$('#dg').datagrid({  
    view: detailview,  
    detailFormatter:function(index,row){  
        return '&lt;div id=&quot;ddv-' + index + '&quot; style=&quot;padding:5px 0&quot;&gt;&lt;/div&gt;';  
    },  
    onExpandRow: function(index,row){  
        $('#ddv-'+index).panel({  
            border:false,  
            cache:false,  
            href:'datagrid21_getdetail.php?itemid='+row.itemid,  
            onLoad:function(){  
                $('#dg').datagrid('fixDetailRowHeight',index);  
            }  
        });  
        $('#dg').datagrid('fixDetailRowHeight',index);  
    }  
});  </pre></p>
    <p>我们定义detailFormatter函数告诉datagrid 如何渲染详细视图,在这种情况下,我们返回一个简单的 '<div>'元素,它将充当最为一个详细内容的容器, 注意:详细信息为空,当用户点击展开按钮('+'),onExpandRow事件将被触发,所以我们可以写一些代码去加载ajax详细内容,最后我们调用fixDetailRowHeight方法去固定行高度,当详细内容加载之后.</p>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 3: 服务器端代码</h4>
    <p>datagrid21_getdetail.php<br>
      </span></span></span></p>
    <p>
    <pre name="code" class="php">&lt;?php  
$itemid = $_REQUEST['itemid'];  
  
$content = file_get_contents('data/datagrid_data.json');  
$data = json_decode($content,true);  
foreach($data['rows'] as $item){  
    if ($item['itemid'] == $itemid){  
        break;  
    }  
}  
  
?&gt;  
  
&lt;table class=&quot;dv-table&quot; border=&quot;0&quot; style=&quot;width:100%;&quot;&gt;  
    &lt;tr&gt;  
        &lt;td rowspan=&quot;3&quot; style=&quot;width:60px&quot;&gt;  
            &lt;?php  
                echo &quot;&lt;img src=\&quot;images/$itemid.gif\&quot; style=\&quot;height:50px\&quot;/&gt;&quot;;  
            ?&gt;  
        &lt;/td&gt;  
        &lt;td class=&quot;dv-label&quot;&gt;Item ID: &lt;/td&gt;  
        &lt;td&gt;&lt;?php echo $item['itemid'];?&gt;&lt;/td&gt;  
        &lt;td class=&quot;dv-label&quot;&gt;Product ID:&lt;/td&gt;  
        &lt;td&gt;&lt;?php echo $item['productid'];?&gt;&lt;/td&gt;  
    &lt;/tr&gt;  
    &lt;tr&gt;  
        &lt;td class=&quot;dv-label&quot;&gt;List Price: &lt;/td&gt;  
        &lt;td&gt;&lt;?php echo $item['listprice'];?&gt;&lt;/td&gt;  
        &lt;td class=&quot;dv-label&quot;&gt;Unit Cost:&lt;/td&gt;  
        &lt;td&gt;&lt;?php echo $item['unitcost'];?&gt;&lt;/td&gt;  
    &lt;/tr&gt;  
    &lt;tr&gt;  
        &lt;td class=&quot;dv-label&quot;&gt;Attribute: &lt;/td&gt;  
        &lt;td colspan=&quot;3&quot;&gt;&lt;?php echo $item['attr1'];?&gt;&lt;/td&gt;  
    &lt;/tr&gt;  
&lt;/table&gt;  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid21-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>